<template>
  <n-config-provider class="page" :theme="darkTheme" :hljs="hljs">
    <n-message-provider>
      <n-dialog-provider>
        <router-view />
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script>
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
import java from "highlight.js/lib/languages/java";
import kotlin from "highlight.js/lib/languages/kotlin";
import markdown from "highlight.js/lib/languages/markdown";
import { ref, onMounted } from "vue";
import { darkTheme } from "naive-ui";
import { useStore } from "vuex";

hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("kotlin", kotlin);
hljs.registerLanguage("markdown", markdown);

export default {
  name: "App",
  components: {},
  setup() {
    const store = useStore();

    let innerWidth = ref(window.innerWidth);
    let innerHeight = ref(window.innerHeight);
    let innerWidthActions = (width) =>
      store.dispatch("window/innerWidthActions", width);

    let innerHeightActions = (height) =>
      store.dispatch("window/innerHeightActions", height);

    onMounted(() => {
      innerWidthActions(window.innerWidth);
      innerHeightActions(window.innerHeight);

      window.addEventListener("resize", () => {
        return (() => {
          // console.log(
          //   `innerWidth = ${window.innerWidth},innerHeight = ${window.innerHeight}`
          // );
          innerWidthActions(window.innerWidth);
          innerHeightActions(window.innerHeight);
        })();
      });
    });

    return {
      hljs,
      innerWidth,
      innerHeight,
      innerWidthActions,
      innerHeightActions,
      darkTheme,
    };
  },
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>
